<template>
  <div style="position: relative">
    <div style="position: absolute">
      <table v-for="i in suser1">
        <tr>
          <th>{{ i.name }}</th>
        </tr>
        <tr>


          <td>名称</td>
          <td>价格</td>
          <td>图片</td>
        </tr>
        <tr v-for="j in i.shop">

          <td>{{ j.name }}</td>
          <td>{{ j.price }}</td>
          <td><img :src="'http://127.0.0.1:8000'+j.pic" alt="" width="200px"></td>
        </tr>
      </table>
    </div>
    <div style="position: absolute;left: 500px">
      <table v-for="i in suser2">
        <tr>
          <th>{{ i.name }}</th>
        </tr>
        <tr>


          <td>名称</td>
          <td>价格</td>
          <td>图片</td>
        </tr>
        <tr v-for="j in i.shop">

          <td>{{ j.name }}</td>
          <td>{{ j.price }}</td>
          <td><img :src="'http://127.0.0.1:8000'+j.pic" alt="" width="200px"></td>
        </tr>
      </table>
      <p>
        <router-link :to="{name:'show_login'}">去登录</router-link>
      </p>

    </div>
  </div>
</template>

<script>
export default {
  name: "show_suser",
  data() {
    return {
      suser1: [],
      suser2: [],

    }

  },
  methods: {
    get_suser1() {
      this.$axios.get('suser/')
        .then(res => {
          if (res.data.code == 200) {
            this.suser1 = res.data.list

          }
        })

    },
    get_suser2() {
      this.$axios.get('suser2/')
        .then(res => {
          if (res.data.code == 200) {
            this.suser2 = res.data.list

          }
        })

    },
  },
  mounted() {
    this.get_suser1()
    this.get_suser2()
  }
}
</script>

<style scoped>

</style>
